<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/share/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>角色用户</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<%@ include file="/WEB-INF/share/easyuilist.jsp"%>
    <script>
	    var roleId = request('roleId');
	    $(function () {
	        $(".center-Panel").height($(window).height() - 40);
	        GetMember();
	    });
	    //加载成员
	    function GetMember() {
	    	var data = JSON.parse('${funTrees}');
	    	var _html = "";
            $.each(data, function (i) {
                var row = data[i];
                    var imgName = "UserCard01.png";
                    var active = "";
                    if (row.checked == 1) {
                        active = "active";
                    }
                    _html += '<div class="card-box ' + row.username + ' ' + active + '">';
                    _html += '    <div class="card-box-img">';
                    _html += '        <img src="${ctx}/admin/Images/' + imgName + '" />';
                    _html += '    </div>';
                    _html += '    <div id="' + row.userid + '" class="card-box-content">';
                    _html += '        <p>账户：' + row.account + '</p>';
                    _html += '        <p>姓名：' + row.username + '</p>';
                    _html += '        <p>职位：' + row.job + '</p>';
                    _html += '    </div><i></i>';
                    _html += '</div>';
            });
            $(".gridPanel").html(_html);
            $(".card-box").click(function () {
                if (!$(this).hasClass("active")) {
                    $(this).addClass("active")
                } else {
                    $(this).removeClass("active")
                }
            })
	        //模糊查询用户（注：这个方法是理由jquery查询）
	        $("#txt_TreeKeyword").keyup(function () {
	            var value = $(this).val();
	            if (value != "") {
	                window.setTimeout(function () {
	                    $(".card-box")
	                     .hide()
	                     .filter(":contains('" + (value) + "')")
	                     .show();
	                }, 200);
	            } else {
	                $(".card-box").show();
	            }
	        }).keyup();
	    }
	    //保存表单
	    function AcceptClick() {
	        var userIds = [];
	        $('.gridPanel .active .card-box-content').each(function () {
	            userIds.push($(this).attr('id'));
	        });
	        var postData = $("#form1").GetWebControls();
	        postData["roleID"] = $('#roleid').val();
	        postData["ids"] = String(userIds)
	        $.SaveForm({
	            url: "${ctx}/role/usersave",
	            param: postData,
	            loading: "正在保存角色成员...",
	            success: function () {
	                $.currentIframe().$("#gridTable").trigger("reloadGrid");
	            }
	        })
	    }
	</script>
</head>
<body>
<form id="form1">
<input id="roleid" value="${roleid}" type="hidden"/>
        <div class="treesearch">
            <input id="txt_TreeKeyword" type="text" class="form-control" style="border-top: none;" placeholder="请输入要查询关键字" />
            <span id="btn_TreeSearch" class="input-query" title="Search"><i class="fa fa-search"></i></span>
        </div>
        <div class="center-Panel" style="border:1px solid #ccc;margin: 0px; border-right: none; border-left: none; border-bottom: none; background-color: #fff; overflow: auto; padding-bottom: 10px;">
            <div class="gridPanel">
            </div>
        </div>
</form>
</body>
</html>
